<template>
    <div>
        <h2>Joke:</h2>
        <p>{{ joke }}</p>
        <button @click="fetchJoke">Get Joke</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            joke: "",
        };
    },
    methods: {
        fetchJoke() {
            // const apiUrl = "https://api.vvhan.com/api/joke?type=json";
            const apiUrl = "https://api.vvhan.com/api/love?type=json";

            fetch(apiUrl)
                .then((response) => response.json())
                .then((data) => {
                    if (data.success) {
                        console.log(data);
                        this.joke = data.ishan;
                    } else {
                        this.joke = "Failed to fetch joke.";
                    }
                })
                .catch((error) => {
                    console.error(error);
                    this.joke = "An error occurred while fetching joke.";
                });
        },
    },
    mounted() {
        this.fetchJoke();
    },
};
</script>
